<template>
  <div id="app" @click="fullScreen" @touchstart="onStartOpear">
    <div class="container">
      <transition name="fade-transform" mode="out-in">
        <router-view />
      </transition>
    </div>
    <div v-if="routerName != 'Index'" class="goback">
      <img src="@/assets/images/back.png" alt="" class="back" @click="onBack" />
    </div>
    <div v-if="routerName != 'Index'" class="goBack">返回</div>
    <Screensaver v-if="showScreensaver" />
  </div>
</template>
<script>
import Screensaver from '@/components/Screensaver'
export default {
  components: {
    Screensaver
  },
  data () {
    return {
      routerName: '',
      touchstarttimeout: 0,
      showScreensaver: false, // 是否显示屏保
    }
  },

  created() {
    this.$nextTick(() => {
      this.fullScreen()
    })
    this.refresh()

    this.onStartOpear()
  },
  watch: {
    '$route'(to, from) {
      this.routerName = to.name
    }
  },
  methods: {
    fullScreen() {
      if (process.env.NODE_ENV === 'development') {
        return
      }
      //全屏
      var docElm = document.documentElement;
      //W3C
      if(docElm.requestFullscreen) {
        docElm.requestFullscreen();
      }
  
      //FireFox
      else if(docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      }
  
      //Chrome等
      else if(docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
      }
  
      //IE11
      else if(elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      }
    },
    onBack() {
      this.$router.go(-1)
    },
    refresh() {
      setTimeout(() => {
        // location.href = location.href + (location.href.indexOf("?")>-1?"&":"?") + "time="+(new Date()).getTime()
        location.reload(true)
      }, 1000 * 60 * 2)
    },
    onStartOpear(e) {
      if (this.showScreensaver) {
        e.stopPropagation();
        setTimeout(() => {
          this.showScreensaver = false
        }, 260) 
      }
      clearTimeout(this.touchstarttimeout)
      const timeout =  5 * 60 * 1000 // 5分钟不操作开启屏保模式
      this.touchstarttimeout = setTimeout(() => {
        this.showScreensaver = true
      },
        timeout)
        // 3 * 1000)
    }
  }
}
</script>
<style lang="less">
#app {
  min-height: 100vh;
  background: rgba(243,119,120,0.5);
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #333;
}
* {
  box-sizing: border-box;
}
.container{
  position: relative;
  z-index: 1;
}
.goback{
  background: rgb(156, 18, 13);
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  position: fixed;
  top: 48%;
  left: 0;
  z-index: 9;
  display: flex;
  // flex-direction: column;
  align-items: center;
  justify-content: center;
  .back{
    width: .3rem;
  }
}
.goBack{
  position: fixed;
  top: 54%;
  left: .1rem;
  color:#000;
  z-index: 9;

}
</style>
